<script>
import {ErrorMessage} from "vee-validate"
import useUserStore from '@/stores/user'
import {mapActions} from 'pinia'

export default {
  data() {
    return {
      activeTabClass: 'bg-blue-600',
      tab: 'login',
      // 指定vee-form里的vee-feild的规则
      // key是vee-feild的name属性,值是vee-feild要用的规则名
      schema: {
        name: 'required|min:3|max:12|alpha_spaces',
        email: 'required|min:3|max:30|email',
        // age: '',
        password: 'required|min:3|max:30',
        confirm_password: 'confirmed:@password',
        gender: 'required',
        accept: 'required'
      },
      loginSchema: {
        password: 'required|min:3|max:30',
        email: 'required|min:3|max:30|email',
      }
    }
  },
  methods: {
    ...mapActions(useUserStore, {
      createUser: 'register',
      signIn: "login"
    }),
    changeTab() {
      if (this.tab === 'login') {
        this.tab = 'register'
      } else {
        this.tab = 'login'
      }
    },
    // register(values) {
    //   console.log(values)
    // },
    login(values) {
      this.signIn()
      console.log(values)
      this.$router.push({name: 'home'})
    }
  },
  components: {ErrorMessage}
}
</script>

<template>
  <div class="flex flex-col items-center w-screen mt-4">
    <div class="py-4 text-left px-6 w-[70%]">
      <!-- Tabs -->
      <ul class="flex flex-wrap mb-4">
        <li @click="tab='login'" class="flex-auto text-center">
          <a
              class="block rounded py-3 px-4 transition"
              :class="{'bg-blue-600 text-white':tab==='login','text-black':tab!=='login'}"
              href="#"
          >Login</a
          >
        </li>
        <li @click="tab='register'" class="flex-auto text-center">
          <a class="block rounded py-3 px-4 transition"
             :class="{'bg-blue-600 text-white':tab==='register' ,'text-black':tab!=='register'}"
             href="#">Register</a>
        </li>
      </ul>
      <!-- Login Form -->
      <vee-form :validation-schema="loginSchema" @submit="login" v-show="tab === 'login'">
        <!-- Email -->
        <div class="mb-3">
          <label class="inline-block mb-2">Email</label>
          <vee-field
              name="email"
              type="email"
              class="block w-full py-1.5 px-3 text-gray-800 border border-gray-300 transition duration-500 focus:outline-none focus:border-black rounded"
              placeholder="Enter Email"
          />
          <!-- 错误信息 -->
          <ErrorMessage class="text-red-600" name="email"/>
        </div>
        <!-- Password -->
        <div class="mb-3">
          <label class="inline-block mb-2">Password</label>
          <vee-field
              name="password"
              type="password"
              class="block w-full py-1.5 px-3 text-gray-800 border border-gray-300 transition duration-500 focus:outline-none focus:border-black rounded"
              placeholder="Enter Password"
          />
          <!-- 错误信息 -->
          <ErrorMessage class="text-red-600" name="password"/>
        </div>
        <button
            type="submit"
            class="block w-full bg-purple-600 text-white py-1.5 px-3 rounded transition hover:bg-purple-700"
        >
          Submit
        </button>
      </vee-form>
      <!-- Registration Form -->
      <vee-form v-show="tab === 'register'" @submit="createUser" :validation-schema="schema">
        <!-- Name -->
        <div class="mb-3">
          <label class="inline-block mb-2">Name</label>
          <vee-field
              name="name"
              type="text"
              class="block w-full py-1.5 px-3 text-gray-800 border border-gray-300 transition duration-500 focus:outline-none focus:border-black rounded"
              placeholder="Enter Name"
          />
          <!-- 错误信息 -->
          <ErrorMessage class="text-red-600" name="name"/>
        </div>
        <!-- Email -->
        <div class="mb-3">
          <label class="inline-block mb-2">Email</label>
          <vee-field
              name="email"
              type="email"
              class="block w-full py-1.5 px-3 text-gray-800 border border-gray-300 transition duration-500 focus:outline-none focus:border-black rounded"
              placeholder="Enter Email"
          />
          <!-- 错误信息 -->
          <ErrorMessage class="text-red-600" name="email"/>
        </div>
        <!-- Password -->
        <div class="mb-3">
          <label class="inline-block mb-2">Password</label>
          <vee-field
              name="password"
              type="password"
              class="block w-full py-1.5 px-3 text-gray-800 border border-gray-300 transition duration-500 focus:outline-none focus:border-black rounded"
              placeholder="Enter Password"
          />
          <!-- 错误信息 -->
          <ErrorMessage class="text-red-600" name="password"/>
        </div>
        <!-- Confirm Password -->
        <div class="mb-3">
          <label class="inline-block mb-2">Confirm Password</label>
          <vee-field
              name="confirm_password"
              type="password"
              class="block w-full py-1.5 px-3 text-gray-800 border border-gray-300 transition duration-500 focus:outline-none focus:border-black rounded"
              placeholder="Confirm Password"
          />
          <!-- 错误信息 -->
          <ErrorMessage class="text-red-600" name="confirm_password"/>
        </div>
        <!-- Gender -->
        <div class="mb-3">
          <label class="inline-block mb-2">Gender</label>
          <vee-field
              as="select"
              name="gender"
              class="block w-full py-1.5 px-3 text-gray-800 border border-gray-300 transition duration-500 focus:outline-none focus:border-black rounded"
          >
            <option value="0">girl</option>
            <option value="1">boy</option>
          </vee-field>
          <!-- 错误信息 -->
          <ErrorMessage class="text-red-600" name="gender"/>
        </div>
        <!-- Accept -->
        <div class="mb-3">
          <vee-field
              type="checkbox"
              value="1"
              name="accept"
              class="w-4 h-4 float-left mt-1 rounded"
          />
          <label class="inline-block mb-2 ml-2">Accept terms of service</label>
          <!-- 错误信息 -->
          <ErrorMessage class="text-red-600" name="accept"/>
        </div>
        <button
            type="submit"
            class="block w-full bg-purple-600 text-white py-1.5 px-3 rounded transition hover:bg-purple-700"
        >
          Submit
        </button>
      </vee-form>
    </div>
  </div>
</template>

<style scoped>

</style>